<template>
  <a-list :header="`共 ${dataList.length} 条回复`" item-layout="horizontal" :data-source="dataList">
    <template #renderItem="{ item }">
      <a-list-item>
        <Comment :author="item.author" :avatar="item.avatar">
          <template #content>
              {{ item.content }}
          </template>
          <template #actions>
            <span key="comment-basic-like">
              <a-tooltip title="Like">
                <template v-if="action === 'liked'">
                  <LikeFilled @click="like" />
                </template>
                <template v-else>
                  <LikeOutlined @click="like" />
                </template>
              </a-tooltip>
              <span style="padding-left: 8px; cursor: auto">
                {{ likes }}
              </span>
            </span>
            <span key="comment-basic-dislike">
              <a-tooltip title="Dislike">
                <template v-if="action === 'disliked'">
                  <DislikeFilled @click="dislike" />
                </template>
                <template v-else>
                  <DislikeOutlined @click="dislike" />
                </template>
              </a-tooltip>
              <span style="padding-left: 8px; cursor: auto">
                {{ dislikes }}
              </span>
            </span>
            <span>回复</span>
            <Popconfirm title="确定删除吗？">
              <span>删除</span>
            </Popconfirm>
          </template>
          <template #datetime>
            <Tooltip :title="item.datetime.format('YYYY-MM-DD HH:mm:ss')">
              <span>{{ item.datetime.fromNow() }}&nbsp;&nbsp;</span>
              <span>中国·武汉</span>
              <!-- <span>{{ item.datetime.format('YYYY-MM-DD HH:mm:ss') }}</span> -->
            </Tooltip>
          </template>
        </Comment>
      </a-list-item>
    </template>
  </a-list>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue'
import dayjs from 'dayjs';
import { Comment, Tooltip, Popconfirm } from 'ant-design-vue';
import { LikeFilled, LikeOutlined, DislikeFilled, DislikeOutlined } from '@ant-design/icons-vue';
import relativeTime from 'dayjs/plugin/relativeTime';
dayjs.extend(relativeTime);

const dataList = ref([
  {
    id: 1,
    author: 'Han Solo',
    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
    content:
      'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
    datetime: dayjs(),
  },
  {
    id: 2,
    author: 'Han Solo',
    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
    content:
      'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
    datetime: dayjs().subtract(2, 'days'),
  },
  {
    id: 3,
    author: 'Han Solo',
    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
    content:
      'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
    datetime: dayjs().subtract(2, 'days'),
  },
]);

const likes = ref<number>(0);
const dislikes = ref<number>(0);
const action = ref<string>();

const like = () => {
  likes.value = 1;
  dislikes.value = 0;
  action.value = 'liked';
};

const dislike = () => {
  likes.value = 0;
  dislikes.value = 1;
  action.value = 'disliked';
};
</script>
